<template>
  <div class="cs-page-container">
    <el-card class="box-card">
      <div class="cs-filter-container" style="margin-bottom: 20px">
        <el-select
          v-model="listQuery.appType"
          filterable
          clearable
          placeholder="请选择产品名称"
        >
          <el-option label="花伴" :value="0" />
          <el-option label="花伴约会" :value="1" />
        </el-select>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
        <el-button
          class="filter-item"
          type="primary"
          @click="handleCreate"
        >新增弹窗</el-button>
      </div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column
          label="产品名称"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ appTypeItem[scope.row.appType] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="公告标题"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="图片"
          align="center"
        >
          <template slot-scope="scope">
            <image-tooltip :image-id="scope.row.cover">
              <img
                slot="img"
                style="width:100px;"
                :src="scope.row.cover"
                @click="showImage(scope.row.cover)"
              >
            </image-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="链接"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.url }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="开关状态"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              :type="scope.row.open ? 'primary' : 'danger'"
              size="mini"
            >{{ scope.row.open ? '已打开' : '已关闭' }}</el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="330"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="handleUpdate(row)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="800px"
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <el-form-item
          label="公告标题:"
          prop="title"
        >
          <el-input v-model.trim="temp.title" maxlength="60" />
        </el-form-item>
        <el-form-item
          label="链接:"
          prop="url"
        >
          <el-input v-model.trim="temp.url" maxlength="800" />
        </el-form-item>
        <el-form-item
          label="APP"
          prop="open"
        >
          <el-select v-model="temp.appType" filterable placeholder="请选择产品名称">
            <el-option label="花伴" :value="0"></el-option>
            <el-option label="花伴约会" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="上传封面(345:100):"
          prop="cover"
        >
          <Upload
            :img="temp.cover"
            :is-size="true"
            @change="imageChange"
          />
        </el-form-item>
        <el-form-item
          label="开关"
          prop="open"
        >
          <el-switch v-model="temp.open" />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="createData"
        >确认</el-button>
      </div>
    </el-dialog>
    <ImageViewer
      :visible.sync="imageViewerVisible"
      :url="imageUrl"
    />
  </div>
</template>

<script>
import {
  getNoticeDynamic,
  updateNoticeDynamic,
  deleteNoticeDynamic
} from '@/api/customSetting'
import Upload from '@/components/Upload/SingleImage'
import ImageViewer from '@/components/ImageViewer'

export default {
  name: 'DynamicSetting',
  components: { Upload, ImageViewer },
  data() {
    return {
      imageViewerVisible: false,
      imageUrl: '',
      tableKey: 0,
      list: null,
      listLoading: true,
      listQuery: {
        appType: 0
      },
      appTypeItem: { 0: '花伴', 1: '花伴约会' },
      alertNotice: {
        url: null,
        title: null,
        id: undefined,
        open: false,
        cover: null,
        type: 0
      },
      temp: {
        appType: 0,
        url: null,
        title: null,
        id: undefined,
        open: false,
        cover: null,
        type: 0
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新建'
      },
      dialogPvVisible: false,
      total: 0,
      rules: {
        appType: [{ required: true, message: '必选项', trigger: 'blur' }],
        title: [{ required: true, message: '必选项', trigger: 'blur' }],
        cover: [{ required: true, message: '必选项', trigger: 'blur' }],
        url: [{ required: true, message: '必选项', trigger: 'blur' }],
        open: [{ required: true, message: '必选项', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      this.listLoading = true
      getNoticeDynamic(this.listQuery).then(response => {
        this.list = response.data
        this.alertNotice = {
          url: null,
          title: null,
          id: undefined,
          open: false,
          cover: null,
          type: 0
        }
        console.log(this.list)
        this.listLoading = false
      })
    },
    showImage(url) {
      this.imageViewerVisible = true
      this.imageUrl = url
    },
    imageChange(fileList, type) {
      if (type === 'upload') {
        // const size = fileList[0].size
        // const rate = size[0] / size[1]
        // const { appType } = this.temp
        this.temp = Object.assign(this.temp, { cover: fileList[0].url })
        // if (rate === 345 / 100 && appType === 0) {
        //   this.temp = Object.assign(this.temp, { cover: fileList[0].url })
        // } else {
        //   this.temp = Object.assign(this.temp, { cover: '' })
        //   this.$message({
        //     message: '图片的比例不正确',
        //     type: 'fail'
        //   })
        // }
      } else if (type === 'remove') {
        this.temp = Object.assign(this.temp, { cover: null })
      }
    },
    resetTemp() {
      this.temp = {
        type: 0,
        url: null,
        title: null,
        id: undefined,
        cover: null
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleAlertNotice() {
      this.$refs['dataForm2'].validate(valid => {
        valid &&
        updateNoticeDynamic(this.alertNotice).then(() => {
          this.doSearch()
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    createData() {
      this.temp['type'] = 0
      this.$refs['dataForm'].validate(valid => {
        valid &&
        updateNoticeDynamic(this.temp).then(() => {
          this.doSearch()
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleDelete(row) {
      this.$confirm(`是否删除此内容?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteNoticeDynamic(row.id).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
            this.doSearch()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.img-wrap {
  width: 100px;
  height: 100px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
